<template>

	
	
	 <view class="goodWrapperDrag">
		 <view class="goodWrapperDrag-top">拖拽播放排序</view>
	        <HM-dragSorts @computedPrice="computedPrice" ref="dragSorts"  :list="cartInfo" :autoScroll="true" :feedbackGenerator="false" :rowHeight="150" @change="change" @confirm="confirm" @onclick="onclick" ></HM-dragSorts>  
	    </view>
		</view>
</template>
<script>
	import {
		getCategory,
		postCartAdd,
		getProducts,
		postCartDel,
		changeCartNum,
		getCartCount
	} from '@/api/store';
	export default {
		name: "OrderGoods",
		props: {
			cartEdit: Number,
			evaluate: Number,
			cartInfo: {
				type: Array,
				default: () => []
			}
		},
		data: function() {
			return {
				lineHeight: 0,
				endX: 0,
				endY: 0,
				localCartInfo: [],
				newmoveId: 0,
				list:[
						{"name": "花呗", "icon": "/static/img/1.png"},
						{"name": "余额宝","icon": "/static/img/2.png"},
						{"name": "账户余额","icon": "/static/img/3.png"},
						{"name": "交通银行信用卡(0001)","icon": "/static/img/4.png"},
						{"name": "中国建设银行信用卡(4401)","icon": "/static/img/5.png"},
						{"name": "网商储蓄卡(7223)","icon": "/static/img/6.png"}
					]
			};
		},
		onReady() {

		},
		watch: {
			
		},
		mounted() {
			//  this.lineHeight = this.cartInfo.length * (135 + 10)
			// this.initLocat()
		},
		methods: {
			computedPrice(){
				this.$emit("computePrice")
			},
			change(e){
				console.log(e)
			},
			confirm(e){
				console.log(e)
				this.$emit("comfirm",e.list)
			},
			onclick(cart){
				this.$yrouter.push({
					path: "/pages/shop/GoodsEvaluate/index",
					query: {
						id: cart.unique
					}
				});
			},
			routerGo(cart) {
				this.$yrouter.push({
					path: "/pages/shop/GoodsEvaluate/index",
					query: {
						id: cart.unique
					}
				});
			},
			del(e) {
				let that = this
				changeCartNum(e.id, e.num - 1).then(function(res) {
					if (!res.data) {
						uni.showToast({
							title: res.msg || res.data.msg || res.data.message,
							icon: 'none',
							duration: 2000
						});
						return;
					} else {
						uni.showToast({
							title: '减少数量成功',
							icon: 'success',
							duration: 2000,
							complete: () => {
								that.$emit("computePrice")
							}
						});
					}
				})
			},
			// 加入购物车；
			add: function(e) {
				let that = this

				let q = {
					productId: e.productid,
					cartNum: 1
				};

				postCartAdd(q)
					.then(function(res) {


						if (!res.data) {
							uni.showToast({
								title: res.msg || res.data.msg || res.data.message,
								icon: 'none',
								duration: 2000
							});
							return;
						} else {
							uni.showToast({
								title: '添加购物车成功',
								icon: 'success',
								duration: 2000,
								complete: () => {
									that.$emit("computePrice")
								}
							});
						}
					})
					.catch(error => {

					});
			},
		}
	};
</script>
<style>
	.goodWrapperDrag {
		margin-top: 10rpx;
		width: 100%;
		
		/* height: 100%; */
		

	}
.goodWrapperDrag-top{
	height: 80rpx;
	border-radius: 30rpx 30rpx 0rpx 0rpx;
	width: 100%;justify-content: center;display: flex;background-color: #fff;
	font-weight: bold;
	align-items: center;
}
	.item {
		display: flex;
		padding: 10rpx;
		border-radius: 20rpx;
		background-color: #fff;
		border-bottom: #AEC5B5;
		height: 260rpx;
		width: 100%;
	}

	.pictrue {
		width: 50%;
		height: 240rpx;
	}

	.image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.text {
		width: 50%;
		position: relative;
	}

	.name {
		font-size: 28rpx;
		color: #282828;
		width: 453rpx;
	}

	.num {
		font-size: 26rpx;
		color: #868686;
	}

	.attr {
		font-size: 20rpx;
		color: #868686;
		margin-top: 7rpx;
	}

	.money {
		font-size: 26rpx;
		margin-top: 17rpx;
	}

	.sortid {
		display: flex;
		justify-content: center;
	}

	.sortid-text {
		background-color: #ff0000;
		color: #fff;
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		place-content: center;
	}

	.cartNume {
		margin-top: 0.17 * 100rpx;
		display: flex;
		line-height: 34rpx;
	}

	.item-icon {
		width: 63rpx;
		display: flex;
		place-items: center;
	}
</style>